<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { useUserStore } from '../stores/user'

const props = defineProps({
  // 所需权限，可以是单个角色或角色数组
  requireRole: {
    type: [String, Array],
    required: true
  },
  // 如果没有权限，是否显示fallback内容
  fallback: {
    type: Boolean,
    default: true
  }
})

const userStore = useUserStore()

// 检查用户是否有权限
const hasPermission = computed(() => {
  // 如果用户未登录或没有角色信息，返回false
  if (!userStore.userInfo || !userStore.userInfo.role) {
    return false
  }
  
  const userRole = userStore.userInfo.role
  
  // 如果要求的角色是字符串
  if (typeof props.requireRole === 'string') {
    return userRole === props.requireRole || userRole === 'Admin'
  }
  
  // 如果要求的角色是数组
  if (Array.isArray(props.requireRole)) {
    return props.requireRole.includes(userRole) || userRole === 'Admin'
  }
  
  return false
})
</script>

<template>
  <div v-if="hasPermission">
    <slot></slot>
  </div>
  <div v-else-if="fallback">
    <slot name="fallback">
      <div class="no-permission">
        <el-empty description="您没有访问权限"></el-empty>
      </div>
    </slot>
  </div>
</template>

<style scoped>
.no-permission {
  padding: 40px;
  text-align: center;
}
</style> 